$(function () {
    // 1.1 获取裁剪区域的 DOM 元素
    var $image = $("#image");
    // 1.2 配置选项
    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: ".img-preview",
    };

    // 1.3 创建裁剪区域
    $image.cropper(options);
    // 为上传按钮绑定事件
    $("#btnChooseImage").on("click", function () {
        $("#file").click();
    });
    // 为文件选择绑定 change 事件
    $("#file").on("change", function (e) {
        // 获取用户选择的文件
        var fileList = e.target.files;
        if (fileList.length === 0) return layer.msg("请选择照片！");
        // 1.拿到用户选择的文件
        var file = fileList[0];
        // 2.根据选择的文件，创建一个对应的 URL 地址：
        var newImgURL = URL.createObjectURL(file);
        // 3.先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：
        $image.cropper("destroy").attr("src", newImgURL).cropper(options);

        $("#btnUpload").on("click", function () {
            // 1.拿到用户裁剪之后的头像
            // 将裁剪后的图片，输出为 base64 格式的字符串
            var dataURL = $image
                .cropper("getCroppedCanvas", {
                    // 创建一个 Canvas 画布
                    width: 100,
                    height: 100,
                })
                // 将 Canvas 画布上的内容，转化为 base64 格式的字符串
                .toDataURL("image/png");
            // 2.调用接口，上传服务器
            $.ajax({
                type: "POST",
                url: "/my/update/avatar",
                data: {
                    avatar: dataURL,
                },
                success: function (res) {
                    if (res.status !== 0) return layer.msg("上传失败，请重试！");
                    console.log(res);
                    // 调用父页面中的方法，重新渲染用户的头像和信息
                    window.parent.getUserInfo();
                },
            });
        });
    });
});
